<template>
	<div class="homebj">
	    <div class="hdxqtop">
	        <div class="hdxqtopleft">
	            <image v-if="datas.typeImg != ''" :src="getImg1(datas.typeImg)" class="hdxqimg1"></image>
	            <image v-if="datas.typeImg == ''" :src="getImg('noimg.png')" alt="" class="hdxqimg1"></image>
	            <image :src="getImg('hdxqjxzicon.png')" alt="" class="hdxqimg2" v-if="datas.type == 0"></image>
	            <image :src="getImg('hdxqjxz.png')" alt="" class="hdxqimg2" v-if="datas.type == 1"></image>
	            <image :src="getImg('hdxqjxzactive.png')" alt="" class="hdxqimg2" v-if="datas.type == 2"></image>
	        </div>
	        <div class="hdxqtopright">
	            <div class="hdxqdes"><span v-if="datas.type == 1">在线报名活动</span><span v-if="datas.type == 2">直接前往现场</span></div>
	            <div class="hdxqzbdwright dz" style="float: none;overflow: hidden;text-align: right;">
	                <span @click="getData2()">
						<image :src="getImg('hdxq_dcactive.png')" alt=""></image>
						<span class="hdxqsc"><span v-if="datas.isLike == true">已点赞</span><span v-if="datas.isLike == false">未点赞</span>（{{datas.likeNum}}）</span></span>
	                <span @click="getData3()" class="hdxqzbdwrightmr"><image :src="getImg('hdxq_scactive.png')" alt=""></image><span class="hdxqsc"><span v-if="datas.isCollection == true">已收藏</span><span v-if="datas.isCollection == false">未收藏</span>（{{datas.collection}}）</span></span>
	             </div>
	        </div>
	    </div>
	    <div class="hdxqzbdw">
	        <div class="hdxqtitle">[{{datas.name}}]</div>
	        <div class="hdxqzbdwleft" style="float: none;width: 100%;">
	            <image :src="getImg('hdxq_zbdw.png')" alt=""></image>
	            <span>主办单位：{{datas.unit}}</span>
	        </div>
	        
	        <div class="hdxqlist sj">
	            <image :src="getImg('hdxq_sj-1.png')" alt="" class="hdxqlistimg"></image>
	            <div class="hdxqlistname">活动时间：{{datas.start_time}} ~ {{datas.end_time }}</div>
	        </div>
	        <div class="hdxqlist fzr">
	            <image :src="getImg('hdxq_fzr-1.png')" alt="" class="hdxqlistimg"></image>
	            <div class="hdxqlistname">负责人：{{datas.header}}</div>
	        </div>
	        <div class="hdxqlist fzr">
	            <image :src="getImg('hdxq_fzr-1.png')" alt="" class="hdxqlistimg"></image>
	            <div class="hdxqlistname">联系方式：{{datas.phone}}</div>
	        </div>
	        <div class="hdxqlist dz">
	            <image :src="getImg('hdxq_dz-1.png')" alt="" class="hdxqlistimg"></image>
	            <div class="hdxqlistname">活动地址：{{datas.place}}</div>
	        </div>
	        <div class="hdlcbottom" @click="hdlcclick()">活动历程</div>
	    </div>
	    <div class="hdbmall hddjs">
	        <div class="hddjstitle" v-if="datas.type==0">据活动开始还有(<span v-if="datas.isJieZhi == true">已报名</span><span v-if="datas.isJieZhi == false">未报名</span>)</div>
	        <div class="hddjstitle" v-if="datas.type==1">据活动结束还有(<span v-if="datas.isJieZhi == true">已报名</span><span v-if="datas.isJieZhi == false">未报名</span>)</div>
	        <div class="hddjstitle" v-if="datas.type==2">活动已结束(<span v-if="datas.isJieZhi == true">已报名</span><span v-if="datas.isJieZhi == false">未报名</span>)</div>
	        <div :class="['hddjstime',(datas.type!=1? 'active':'')]">
	            <span class="hddjstimetag" style="margin-right: 10px;">
	                {{&nbsp;&nbsp;&nbsp;hddays&nbsp;&nbsp;&nbsp;}}<div class="hddjstag">Days</div>
	            </span>
	            <span class="hddjstimetag">
	                {{hdhours}}<div class="hddjstag">Hours</div>
	            </span>
	            <span class="hddjstimetag" style="margin: 0 5px;">
	                    :<div class="hddjstag">:</div>
	            </span>
	            <span class="hddjstimetag">
	                {{hdminutes}}<div class="hddjstag">Minutes</div>
	            </span>
	            <span class="hddjstimetag" style="margin: 0 5px;">
	                    :<div class="hddjstag">:</div>
	            </span>
	            <span class="hddjstimetag">
	                {{hdseconds}}<div class="hddjstag">Seconds</div>
	            </span>
	        </div>
	        <div class="hddjsjdtall">
	            <div class="hddjsjdt">
	                <div class="hddjsjdtcur" :style="{width: multipleIndex+'%'}"></div>
	            </div>
	            <image :src="getImg('hddjsjdtxr.png')" v-if="multipleIndex >= 10" :style="{left: 'calc('+multipleIndex+'% - 35px)'}" alt="" class="hddjsjdtimg"></image>
	            <image :src="getImg('hddjsjdtxr.png')" v-if="multipleIndex < 10" alt="" class="hddjsjdtimg"></image>
	        </div>
	        <div class="hddjsall" v-if="datas.type != 2">
	            <div class="hddjslsit">
	                <div class="hddjslsitname">名额</div>
	                <div class="hddjslsitvalue"><span>{{datas.num}}</span>人</div>
	            </div>
	            <div class="hddjslsit">
	                <div class="hddjslsitname">已报名</div>
	                <div class="hddjslsitvalue"><span>{{datas.applyNum}}</span>人</div>
	            </div>
	            <div class="hddjslsit">
	                <div class="hddjslsitname">已入选</div>
	                <div class="hddjslsitvalue"><span>{{datas.ruxuan}}</span>人</div>
	            </div>
	        </div>
	        <div class="hdlcbottom" @click="hdbmclick()" v-if="datas.type == 1 && datas.isJieZhi == false">在线报名</div>
	        <div class="hdlcbottom" v-if="datas.type == 2" style="margin-top:10px;background:linear-gradient(to right, #959595, #858585,#959595)">直接前往现场</div>
	
	    </div>
	    <div class="hometitle">活动详情</div>
	    <div class="hdbmall hdxqcontent">
	        {{datas.description}}
	    </div>
	    <div v-if="datas.isApply">
	        <div class="hometitle">扫码签到</div>
	        <div>
	            <image class="cgydewm" :src="getImg1(datas.url)"></image>
	        </div>
	        <div class="cgydewmtxt">使用者：<span style="color:red">{{datas.name}}</span>（{{datas.cardNo}}）</div>
	    </div>
	    <div class="hometitle">已入选名单</div>
	    <div class="hdbmall yrxmdmargin" v-if="mddatas.length <= 0" style="padding: 0px"></div>
	    <div class="hdbmall yrxmdmargin" v-if="mddatas.length > 0">
	        <div class="hdbmlist" v-for="(el,ind) in mddatas">
	            <div class="yrxmdleft">
	                <image v-if="el.typeImg != null" :src="getImg1(el.typeImg)" class="yrxmdimg">
	                <image v-if="el.typeImg == null" :src="getImg('touxiang.png')" alt="" class="yrxmdimg"></image>
	            </div>
	            <div class="yrxmdright">
	                <div class="yrxmdname">{{el.name}}</div>
	                <div class="yrxmdtime">{{el.bm_time}}</div>
	            </div>
	        </div>
	    </div>
	</div>
</template>

<script>
	import web from '../../components/utils/request.js'
	export default{
		data(){
			return{
				id: 0,
				datas: {},//活动详情
				nowDate: '',//当前时间
				nowDatesjc: '',//当前时间时间戳
				startTime: '',//活动开始时间
				startTimesjc: '',//活动开始时间戳
				endTime: '',//活动结束时间
				endTimesjc: '',//活动结束时间戳
				hddays: '',//活动剩余天数
				hdhours: '',//活动剩余小时
				hdminutes: '',//活动剩余分钟
				hdseconds: '',//活动剩余秒钟
				multipleAll: 0,//总倍数
				multiple: 0,//倍数
				multipleIndex: 0,
				mddatas: [],//入选名单
			}
		},
		onLoad(options) {
			this.id=options.id;
		},
		onReady() {
			this.getData();
			this.getData1();
		},
		methods:{
			getImg(url) {
				return 'https://ruianm.tour-ma.com/r/cms/www/m/huodong/img/' + url;
			},
			getImg1(url) {
				return 'https://ruianm.tour-ma.com' + url;
			},
			getNowTime: function(res) {//转化成时间
			    var thisTime = res;
			    thisTime = thisTime.replace(/-/g, '/');
			    var time = new Date(thisTime);time = time.getTime();
			    return time;
			},
			bsinterval: function(faultDate, completeTime) {
			    var stime = Date.parse(new Date(faultDate));
			    var etime = Date.parse(new Date(completeTime));
			    var usedTime = parseInt((etime - stime)/1000); //两个时间戳相差的秒数
			    return usedTime;
			},
			interval: function(faultDate, completeTime) {
			    var stime = Date.parse(new Date(faultDate));
			    var etime = Date.parse(new Date(completeTime));
			    var usedTime = parseInt((etime - stime)/1000); //两个时间戳相差的秒数
			    this.countDown(usedTime);
			},
			countDown: function(usedTime) {
			    var seconds = parseInt(usedTime);// 秒
			    var minutes = 0;//分
			    var hours = 0;//时
			    var days = 0;//天
			    if(seconds > 60) {//如果秒数大于60，将秒数转换成整数
			        //获取分钟，除以60取整数，得到整数分钟
			        minutes = parseInt(usedTime / 60);
			        //获取秒数，秒数取佘，得到整数秒数
			        seconds = parseInt(usedTime % 60);
			        //如果分钟大于60，将分钟转换成小时
			        if(minutes > 60) {
			            //获取小时，获取分钟除以60，得到整数小时
			            hours = parseInt(minutes / 60);
			            //获取小时后取佘的分，获取分钟除以60取佘的分
			            minutes = parseInt(minutes % 60);
			            //如果小时大于24，将小时转换成天
			            if(hours > 24) {
			                days = parseInt(hours / 24);
			                hours = parseInt(hours % 24);
			            }
			        }
			
			    }
			    if(days < 10) {
			        days = "0" + days;
			    }
			    if(hours < 10) {
			        hours = "0" + hours;
			    }
			    if(minutes < 10) {
			        minutes = "0" + minutes;
			    }
			    if(seconds < 10) {
			        seconds = "0" + seconds;
			    }
			    this.hddays = days;
			    this.hdhours = hours;
			    this.hdminutes = minutes;
			    this.hdseconds = seconds;
			    if(this.datas.type == 1 && this.hddays == '00' && this.hdhours == '00' && this.hdminutes == '00' && this.hdseconds == '00') {
			        this.multipleIndex = 100;
			        this.datas.type = 2;
			        return;
			    }
			    if(this.datas.type == 0 && this.hddays == '00' && this.hdhours == '00' && this.hdminutes == '00' && this.hdseconds == '00') {
			        this.multipleIndex = 0;
			        this.datas.type = 1;
			        window.location.reload();
			    }
				var that=this;
			    setTimeout(function () {
			        usedTime--;
			        that.countDown(usedTime);
			    }, 1000);
			},
			getData(){
				var url = "/conferenceDetail.jspx";
				var arg = {id:this.id};
				var that = this;
				web.httpPost(that, url, arg, function(res) {
					that.datas = res.data.data;
					that.startTime = that.datas.start_time;
					that.endTime = that.datas.end_time;
					that.startTimesjc = that.getNowTime(that.startTime);
					that.endTimesjc = that.getNowTime(that.endTime);
					var day1 = new Date();
					day1.setTime(day1.getTime());
					that.nowDate = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-" + day1.getDate()+ ' ' + day1.getHours()+ ':' + day1.getMinutes()+ ':' + day1.getSeconds();
					that.nowDatesjc = Date.parse(new Date());
					if(parseInt(that.nowDatesjc) > parseInt(that.endTimesjc)) {
					    that.hddays = "00";
					    that.hdhours = "00";
					    that.hdminutes = "00";
					    that.hdseconds = "00";
					    that.multipleIndex = 100;
					    that.datas.type = 2;
					    return;
					}
					if(parseInt(that.nowDatesjc) < parseInt(that.startTimesjc)) {
					    that.datas.type = 0;
					    that.multipleIndex = 0;
					    that.interval(that.nowDatesjc, that.startTimesjc);
					    return;
					}
					that.datas.type = 1;
					that.interval(that.nowDatesjc, that.endTimesjc);
					setInterval(function() {
					    var timestamp = Date.parse(new Date());
					    that.multipleAll = that.bsinterval(that.startTimesjc, that.endTimesjc);
					    that.multiple = that.bsinterval(that.startTimesjc, timestamp);
					    that.multipleIndex = (that.multiple/that.multipleAll)*100;
					    if(that.multipleIndex > 100) {
					        that.multipleIndex = 100;
					        return;
					    } 
					},1000);
				})
			},
			getData1(){
				var url = "/conUserList.jspx";
				var arg = {id:this.id,flag:1};
				var that = this;
				web.httpPost(that, url, arg, function(res) {
					that.mddatas = res.data.data;
				})
			},
			getData2(){
				var url = "/giveLike.jspx";
				var arg = {conId:this.id,type:0};
				var that = this;
				web.httpPost(that, url, arg, function(res) {
					that.datas.likeNum = res.data.likeNum;
					that.datas.isLike = res.data.isLike;
				})
			},
			getData3(){
				var url = "/giveLike.jspx";
				var arg = {conId:this.id,type:1};;
				var that = this;
				web.httpPost(that, url, arg, function(res) {
					that.datas.collection = res.data.collection;
					that.datas.isCollection = res.data.isCollection;
				})
			},
			hdlcclick: function() {//点击进入活动历程页面
				uni.navigateTo({
					url:'./hdlc?id='+this.id
				})
			},
			hdbmclick: function() {//点击进入活动报名页面
				uni.navigateTo({
					url:'./hdbm?id='+this.id
				})
			}
		}
	}
</script>

<style>
	@import url("@/components/css/datascss.css");
</style>
